<template>
  <div class="overflow-auto distribution flex gap-4 h-[100%]">
    <div class="w-[300px] h-[100%]" style="min-width: 300px">
      <MediaSelector @select="selectDevice" />
    </div>
    <ThemeCanvas />
    <Config style="min-width: 300px"></Config>
  </div>
</template>

<script setup lang="ts">
import type { Media } from '@/api/modules/lcd/lcd-device';
import ThemeCanvas from './canvas/ThemeCanvas.vue';
import Config from './config/Config.vue';
import { lcdDistribution } from './data/data';

const route = useRoute();
const selectDevice = (item: Media) => {
  lcdDistribution.value.mediaId = item.mediaId;
};
onMounted(() => {
  const { mediaId } = route.query;
});
</script>

<style lang="scss" scoped>
.distribution {
  height: calc(100vh - 156px);
}
</style>
